<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script>
        window.hdjs = {};
        window.hdjs.base = '/node_modules/hdjs';
        window.hdjs.uploader = '/node_modules/hdjs/test/php/uploader.php?';
        window.hdjs.filesLists = '/node_modules/hdjs/test/php/filesLists.php?';
    </script>
    <script src="/node_modules/hdjs/dist/static/requirejs/require.js"></script>
    <script src="/node_modules/hdjs/dist/static/requirejs/config.js"></script>
</head>
<body style="padding: 50px;">
<h1>单图上传</h1>
<div class="col-sm-10">
    <div class="input-group">
        <input class="form-control" name="thumb" readonly="" value="">
        <div class="input-group-btn">
            <button onclick="upImagePc(this)" class="btn btn-default" type="button">选择图片</button>
        </div>
    </div>
    <div class="input-group" style="margin-top:5px;">
        <img src="/node_modules/hdjs/dist/static/image/nopic.jpg" class="img-responsive img-thumbnail" width="150">
        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
            onclick="removeImg(this)">×</em>
    </div>

    <img src="admin/code" alt="">
</div>
<script>
    require(['hdjs']);
    //上传图片
    function upImagePc() {
        require(['hdjs'], function (hdjs) {
            var options = {
                multiple: false,//是否允许多图上传
                //data是向后台服务器提交的POST数据
                data: {name: '后盾人', year: 2099},

            };
            hdjs.image(function (images) {
                //上传成功的图片，数组类型
                $("[name='thumb']").val('/node_modules/hdjs/test/'+images[0]);
                $(".img-thumbnail").attr('src', '/node_modules/hdjs/test/'+images[0]);
            }, options)
        });
    }

    //移除图片
    function removeImg(obj) {
        $(obj).prev('img').attr('src', '/node_modules/hdjs/dist/static/image/nopic.jpg');
        $(obj).parent().prev().find('input').val('');
    }
</script>
<h1 style="clear: both;margin-top: 200px;">多图上传</h1>
<style>
    #box img {
        width: 200px;
        float: left;
        margin-right: 10px;
        border: solid 1px #999;
        padding: 10px;
        height: 200px;
    }
</style>
<button onclick="upImageMul(this)" class="btn btn-default" type="button">选择图片</button>
<div id="box"></div>
<script>
    require(['hdjs']);
    //上传图片
    function upImageMul(obj) {
        require(['hdjs'], function (hdjs) {
            hdjs.image(function (images) {
                $(images).each(function (k, v) {
                    $("<img src='" + v + "'/>").appendTo('#box');
                })
            }, {
                //上传多图

                multiple: true,
            })
        });
    }
</script>
<h1 style="clear: both;margin-top: 100px;">移动端上传</h1>
<button onclick="upImage()" class="btn btn-default">选择图片</button>
<script>
    //上传图片
    function upImage() {
        require(['hdjs'], function (hdjs) {
            var options = {
                multiple: false,//是否允许多图上传
                //data是向后台服务器提交的POST数据
                data: {name: '后盾人', year: 2099},
                compress: {
                    width: 1600,
                    height: 1600,
                }
            };
            hdjs.image(function (images) {
                console.log(images[0])
            }, options)
        });
    }
</script>
</body>
</html>